<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<fsButton ref="button" plain size="small" :buttons="buttons" @clickHandler="buttonHandler"></fsButton>
			</div>
			<div class="right-panel">
				<ex-search ref="search" :searches="searches" @searchOk="searchHandler" default-code="title" placeholder="请输入名称" ></ex-search>
			</div>
		</el-header>
		<el-main class="nopadding">
			<ex-table  id="pendingTable" ref="table" :class="isIndexWidgets?'sytable':''"
					:tablename="title" :iconname="'sc-icon-CustomDocumentTop'"
					:height="tableHeight" size="small" :columns="columns" :pagination="!isIndexWidgets" :url="this.$API.system.pending.list.url"
							   :params="fixParams" :auto-refresh="false" :selection="false" @columnClick="columnClickHandler"  class="homeTable-Box"></ex-table>
		</el-main>
	</el-container>
</template>

<script>
import ExTable from "@/components/exTable/index.vue";
import ExSearch from "@/components/exSearch/index.vue";
import ExSearchTree from "@/components/exSearchTree/index.vue";
import useTabs from "@/utils/useTabs";

export default {
	name: '审批中心',
	components: {
		ExSearchTree,
		ExSearch,
		ExTable,
	},
	props:{
		isIndexWidgets: {type:Boolean,default:false}
	},
	data() {
		return {
			statistics:{},
			pendingStatus:'0',
			relObjectStatus:'',
			messageCount:this.$store.state.websocket,
			buttons: [
				// {name: "导出", icon: "el-icon-download", click: "export", type: "info"},
			],
			searches: [
				{type: "input", name: "名称", code: "title", placeholder: "请输入名称"},

			],
			columns: [
				{code: "title", name: "名称", width: "260", click: "show1"},
				{code: "content", name: "内容", width: ""},
				{code: "pendingStatus", name: "处理状态", width: "75",formatter: "DICT",key:"PENDING_STATUS"},
				{code: "createUser", name: "申请人", width: "120",formatter: "DICT",key: "SysUser"},
				{code: "relObjectStatus", name: "事项状态", width: "75",formatter: "DICT",key:"REL_OBJECT_STATUS"},
				// {code: "finishUser", name: "办结人", width: "80",formatter: "SysUser"},
				{code: "createTime", name: "时间", width: "200", formatter: "DATETIME"},

			],
			parentLevelCode: null,
			isAlready:false,
			fixParams:{},
			tableHeight:100,//表格高度
			loginUser: this.$TOOL.current.user(),
			title:""
		}
	},
	watch:{
		messageCount:{
			handler(){
				this.searchHandler();
			},
			deep:true
		},
	},
	created() {
		//如果是通过跳转过来的，标签的名称设置为跳转后的标题


		if(this.isIndexWidgets){
			this.fixParams = {pageSize:4};
			this.columns= [
				{code: "title", name: "名称", width: "", click: "show1"},
				{code: "createUser", name: "申请人", width: "75",formatter: "DICT",key: "SysUser"},
				//{code: "relObjectStatus", name: "事项状态", width: "140",formatter: "DICT",key:"REL_OBJECT_STATUS"},
				{code: "createTime", name: "时间", width: "170", formatter: "DATETIME"},
			];
		}
		this.isAlready = true;
	},
	mounted() {
		let Status=localStorage.getItem("syaudit");
		if(Status==="pending"){
			this.pendingStatus="0";
			useTabs.setTitle("待办");
			this.title="待办";
		}else{
			this.relObjectStatus=Status;
			if(this.relObjectStatus==='wait_process'){
				useTabs.setTitle("审批中");
				this.title="审批中";
			}else if(this.relObjectStatus==='finish'){
				useTabs.setTitle("已办结");
				this.title="已办结";
			}else if(this.relObjectStatus==='hang_up'){
				useTabs.setTitle("已挂起");
				this.title="已挂起";
			}
		}

		this.searchHandler();
		this.tableHeightFun()//计算表格高度
	},
	methods: {
		async export(_this,index){
			_this.$refs.button.loading(index, true);
			let queryPrams = _this.$refs.table.queryParams();
			let selections = _this.$refs.table.selections();
			if (selections.length > 0) {
				queryPrams.assetCodes = selections.map(item => item.code);
			}
			queryPrams.exportType = "pending";
			let res = await _this.$API.asset.asset.export.post(queryPrams);
			if (res.code === 2000) {
				await _this.$alert(_this.$t('common.export_request_success'), "提示", {type: 'success'}).catch(()=>{});
			}
			_this.$refs.button.loading(index, false);
		},
		tableHeightFun(){//计算表格高度
			var screenHeight = document.documentElement.clientHeight;
			var clientWidth = document.documentElement.clientWidth;
			let contH=(screenHeight);
			if(clientWidth<1600){
				//contH=(screenHeight-236)/2;
			}
			this.tableHeight=contH-250;
		},
		buttonHandler(index, name) {
			this.$options.methods[name](this, index);
		},
		async searchTreeHandler(data) {
			this.parentLevelCode = data.levelCode;
			let queryParams = {pathCode: this.parentLevelCode}
			await this.$refs.table.refresh(queryParams);
		},
		async searchHandler(pendingStatus,relObjectStatus) {
			//if(pendingStatus===undefined&&relObjectStatus===undefined){
			//	pendingStatus='0';
			//}
			//this.pendingStatus=pendingStatus;
			//this.relObjectStatus=relObjectStatus;
			let queryParams = {pathCode: this.parentLevelCode, }
			if(this.title == '审批中' ){
				queryParams.reateUser = this.loginUser.id;
				queryParams.relObjectStatus = 'wait_process';
				queryParams.pendingStatus = "1";
			}else if(this.title =="待办"){
				queryParams.pendingStatus = "0";
				queryParams.relObjectStatus = 'wait_audit';
			}else{
				queryParams.relObjectStatus = this.relObjectStatus;
			}

			this.$refs.table.refresh(queryParams);
			let res = await this.$API.system.pending.statusStatistics.post({isStatisticsMySelf:true});
			if(res.code===2000){
				this.statistics = res.map;
			}

		},
		columnClickHandler(name, data) {
			this.$options.methods[name](this, data);
		},
		//查看
		async show1(_this, row) {
			if (row.pendingType.includes("document")) {
				let strs = row.relObjectId.split(":");
				let rsp = await _this.$API.asset.document.findById.post({id: strs[0]});
				if (rsp.code === 2000) {
					let document = rsp.data;
					_this.$router.push({
						name: "documentPrepare",
						params: {
							fromRouteId: _this.$TOOL.crypto.MD5(_this.$route.path),
							configId: document.documentConfigId,
							id: document.id
						}
					});
				}
			} else if (row.pendingType.includes("asset_check")) {

			} else {
				this.$message.warning("未知的待办事项类型,请联系管理员处理");
			}
		},
	}
}
</script>

<style scoped>
.todolistTop-head{
	width: 100%;
	display: flex;
	align-items: center;
	position: relative;
	background-color: #fff !important;
}
.todolistTop-headRightBox{
	right: 14px;position: absolute;cursor: pointer;display:flex;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px solid #fff;
}
.todolistTop-headRightBox:hover{
	background-image: linear-gradient(
    221deg,
    rgba(241, 246, 253, 1) 0,
    rgba(241, 246, 253, 1) 0,
    rgba(210, 227, 252, 1) 100%,
    rgba(210, 227, 252, 1) 100%
  );

	border: 1px solid rgba(105, 178, 251, 1);
}
.itemActive{
	width: 36px;
  height: 16px;
  overflow-wrap: break-word;
  color: #333333;
  font-size: 14px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
  cursor: pointer;
}
.itemActiveLine{
	background-image: linear-gradient(
    -88deg,
    rgba(0, 160, 254, 1) 0,
    rgba(0, 160, 254, 1) 0,
    rgba(1, 80, 223, 1) 100%,
    rgba(1, 80, 223, 1) 100%
  );
  border-radius: 2px;
  width: 32px;
  height: 4px;
  margin:  auto;
}

.itemActiveMore:hover{
    margin-left: 91%;
	background-color: rgba(106, 131, 252, .7) !important;
	color: #fff !important;
	float: right;
}
.itemUnActive{
	width: 36px;
  height: 16px;
  overflow-wrap: break-word;
  color: #666666;
  font-size: 14px;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
  cursor: pointer;

}
.sytable{
	height: 96% !important;
}
.sytable .el-table{
	margin-bottom: 0px;
	height: 110% !important;
}

.todotitle{
	width: 77px;
  height: 18px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFangSC-Semibold;
  text-align: left;
  white-space: nowrap;

  margin: 0px 0 0 12px;
  font-weight: 500;
}
.todolistTop{
  height: 27px;
  margin: 7px 0 0 0px;
  padding-top: 20px;
padding-left: 20px;
padding-bottom: 15px;
justify-content:left
}
.todotitleTopImg{
	width: 20px;
  height: 20px;
  background: url(../../../../../public/img/homeTodoTop.png)
    100% no-repeat;
  background-size: 100% 100%;

}
.todotitleTopMoreImg{
	width: 22px;
  height: 22px;
  background: url(../../../../../public/img/homeTodoTopMore.png)
    100% no-repeat;
  background-size: 100% 100%;
  float: left;
}
.todotitleTopMoretitle{
	width: 33px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(1, 123, 207, 1);
  font-size: 16px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  margin: 3px 0 0 8px;
}
@media (min-width: 1200px) and (max-width: 1600px){
	.todolistTop-headRightBox{
		right:0;
	}
}

.noticetitleTopMoreImg{
	width: 4px;
  height: 14px;
  background: url(../../../../../public/img/homeNoticeTopMore.png)
    100% no-repeat;
  background-size: 100% 100%;
  margin-left: 5px;
  float: left;
}
.noticetitleTopMoretitle{
	width: 33px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  margin: -2px 0 0 10px;
  float: left;
}

</style>
